<template>
  <GenericCrud :config="crudConfig">
    <!-- 表格样式的列表项 -->
    <template #record-item="{ records, actions }">
      <!-- 表格头部 -->
      <view class="table-header bg-gray-100 m-[24rpx] rounded-t-[16rpx] p-[20rpx]">
        <view class="grid grid-cols-4 gap-[16rpx] text-[24rpx] font-bold text-gray-700">
          <text>姓名</text>
          <text>地址</text>
          <text>职业</text>
          <text>操作</text>
        </view>
      </view>
      
      <!-- 表格内容 -->
      <view class="table-content">
        <view v-for="(record, index) in records" :key="record.id" 
              class="table-row bg-white m-[24rpx] p-[20rpx] border-b border-gray-200"
              :class="{ 'rounded-b-[16rpx]': index === records.length - 1 }">
          <view class="grid grid-cols-4 gap-[16rpx] items-center">
            <view class="flex items-center">
              <view class="w-[40rpx] h-[40rpx] rounded-full bg-blue-100 flex items-center justify-center mr-[12rpx]">
                <text class="text-[20rpx] text-blue-600 font-bold">{{ record.name?.charAt(0) }}</text>
              </view>
              <view>
                <text class="text-[24rpx] font-medium text-gray-800">{{ record.name }}</text>
                <text class="text-[18rpx] text-gray-500 block">ID: {{ record.recordid }}</text>
              </view>
            </view>
            
            <view class="text-[22rpx] text-gray-700">
              {{ record.liveAddr || '未填写' }}
            </view>
            
            <view class="text-[22rpx] text-gray-700">
              {{ record.workType || '未填写' }}
            </view>
            
            <view class="flex gap-[8rpx]">
              <nut-button size="mini" type="primary" @click.stop="actions.goEdit(record.id)">编辑</nut-button>
              <nut-button size="mini" type="danger" @click.stop="actions.deleteRecord(record.id)">删除</nut-button>
            </view>
          </view>
        </view>
      </view>
    </template>
  </GenericCrud>
</template>

<script setup lang="ts">
import GenericCrud from '@/components/GenericCrud.vue'
import { socioeconomicFields } from './fields'

const crudConfig = {
  pageTitle: '社会经济学信息',
  searchPlaceholder: '患者姓名',
  emptyIcon: '📊',
  emptyText: '暂无记录',
  addButtonText: '添加第一条',
  recordIcon: 'icon-user',
  listApi: '/health_records/socioeconomic/socioeconomicInfo/list',
  addApi: '/health_records/socioeconomic/socioeconomicInfo/add',
  editApi: '/health_records/socioeconomic/socioeconomicInfo/update',
  deleteApi: '/health_records/socioeconomic/socioeconomicInfo/delete',
  queryByIdApi: '/health_records/socioeconomic/socioeconomicInfo/queryById',
  fieldConfig: socioeconomicFields,
  addRoute: './add',
  editRoute: './edit',
  displayFields: ['liveAddr', 'workType', 'incomeLevel', 'mediType']
}
</script>

<style scoped>
.table-header {
  margin: 24rpx 24rpx 0 24rpx;
  border-radius: 16rpx 16rpx 0 0;
}

.table-content {
  margin: 0 24rpx 24rpx 24rpx;
}

.table-row {
  transition: all 0.3s ease;
}

.table-row:hover {
  background-color: #f8fafc;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 16rpx;
  align-items: center;
}
</style>
